<script setup lang="ts">
interface Record {
  id: number
  name: string
  type: string
  category: string
  date: string
  amount: number
  remark?: string
}

const props = defineProps<{
  records: Record[]
  date: string
  showAddForm: boolean
}>()

const emit = defineEmits(['toggle-add-form', 'add-success'])

// 计算当日收支
const dailySummary = computed(() => {
  const income = props.records.filter(r => r.type === '收入').reduce((sum, r) => sum + r.amount, 0)
  const expense = props.records.filter(r => r.type === '支出').reduce((sum, r) => sum + r.amount, 0)
  return { income, expense }
})
</script>

<template>
  <div class="record-detail">
    <div class="date-header">
      <div class="date-info">
        <h3>{{ date }}</h3>
        <div class="daily-summary">
          <span class="income-text">收入: ¥{{ dailySummary.income }}</span>
          <span class="expense-text">支出: ¥{{ dailySummary.expense }}</span>
        </div>
      </div>
      <button v-if="!showAddForm" class="add-button" @click="emit('toggle-add-form', date)">
        + 新增记录
      </button>
    </div>
    
    <AddRecord v-if="showAddForm" @add-success="record => emit('add-success', record)" />
    
    <div class="records">
      <div class="record-header">
        <span class="col name">名称</span>
        <span class="col type">类型</span>
        <span class="col category">种类</span>
        <span class="col remark">备注</span>
        <span class="col spacer"></span>
        <span class="col amount">金额</span>
      </div>
      <div v-for="record in records" :key="record.id" class="record-item">
        <span class="col name">{{ record.name }}</span>
        <span class="col type">
          <span class="type-tag" :class="record.type === '收入' ? 'income' : 'expense'">
            {{ record.type }}
          </span>
        </span>
        <span class="col category">
          <span class="category-tag">{{ record.category }}</span>
        </span>
        <span class="col remark" :title="record.remark">{{ record.remark || '-' }}</span>
        <span class="col spacer"></span>
        <span class="col amount" :class="record.type === '收入' ? 'income' : 'expense'">
          {{ record.type === '收入' ? '+' : '-' }}¥{{ record.amount }}
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.record-detail {
  margin-bottom: 24px;
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.date-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.date-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.date-info h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.daily-summary {
  display: flex;
  gap: 16px;
  font-size: 14px;
}

.records {
  margin-top: 16px;
}

.record-header {
  display: flex;
  padding: 8px 16px;
  background: #fafafa;
  border-radius: 4px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #666;
}

.record-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.record-item:last-child {
  border-bottom: none;
}

.col {
  display: flex;
  align-items: center;
}

.col.name {
  flex: 1.5;
  padding-right: 16px;
}

.col.type {
  flex: 0.6;
  justify-content: center;
}

.col.category {
  flex: 0.8;
  justify-content: center;
}

.col.remark {
  flex: 1.5;
  color: #666;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col.spacer {
  width: 50px;
  flex: 0 0 50px;
}

.col.amount {
  flex: 0.8;
  justify-content: flex-end;
  font-weight: 500;
}

.type-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.type-tag.income {
  background: #52c41a;
}

.type-tag.expense {
  background: #f5222d;
}

.income {
  color: #52c41a;
}

.expense {
  color: #f5222d;
}

.add-button {
  padding: 6px 16px;
  background: #1890ff;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.add-button:hover {
  background: #40a9ff;
}

.category-tag {
  padding: 2px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}
</style> 